<template>
  <el-tabs class="main-view col-12 pd-0" v-model="activeName">
    <el-tab-pane label="个性化推荐" name="recommend">
      <Recommend />
    </el-tab-pane>
    <el-tab-pane label="歌手" name="singer">歌手</el-tab-pane>
    <el-tab-pane label="排行" name="toplist">排行</el-tab-pane>
    <el-tab-pane label="电台" name="dj">电台</el-tab-pane>
    <el-tab-pane label="分类歌单" name="playlist">分类歌单</el-tab-pane>
    <el-tab-pane label="有声" name="ys">分类歌单</el-tab-pane>
    <el-tab-pane label="数字专辑" name="szzj">数字专辑</el-tab-pane>
  </el-tabs>
</template>

<script>
import Recommend from './Recommend'
export default {
  components: {
    Recommend
  },
  data() {
    return {
      activeName: 'recommend'
    }
  }
}
</script>


<style lang="scss">
.main-view.el-tabs {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .el-tabs__header {
    padding: 0;
    margin: 0;
  }
  .el-tabs__content {
    flex: 1;
    overflow: hidden;
    display: flex;
    background: #f0f0f0;
    > .el-tab-pane {
      display: flex;
      flex: 1;
      > .el-scrollbar {
        flex: 1;
        .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
    }
    
  }
  .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
    padding: 0;
  }

  .el-tabs__nav-wrap::after {
    display: none;
  }

  .el-tabs__item {
    font-size: 14px;
  }
}
</style>
